// pages/index/index.tsx
import React, { useState } from 'react'
import { View, Text, ScrollView, Image } from '@tarojs/components'
import HeaderTitle from "@/components/HeaderTitle";
import { defaultUser, UserModel } from "@/shared/services/model/user";
import './index.scss'
import {CostOrderModel} from "@/shared/services/model/order";
import Taro from "@tarojs/taro";
import userService from "@/shared/services/user/user.service";

const Index: React.FC = () => {
  const [user, setUser] = useState<UserModel>(defaultUser)
  const [orderData, setOrderData] = useState<CostOrderModel[]>([])

  Taro.useLoad(async () => {
    let result = await userService.costOrderList({})

    if(result.code == 0){
      setOrderData(result.data)
    }
  })

  return (
    <View className='order-page'>
      {/* Header */}
      <View className='order-header'>
        <HeaderTitle title={'我的订单'} />
      </View>

      {/* 订单列表 - 单独滚动区域 */}
      <View className='order-content'>
        <ScrollView
          className='order-scrollview'
          scrollY
          scrollWithAnimation
          enhanced
          showScrollbar={false}
        >
          <View className='order-list'>
            {orderData.map(item => (
              // 在订单项部分修改为：
              <View key={item.id} className='order-item'>
                {/* 左侧图片 */}
                <Image
                  src='https://img0.baidu.com/it/u=437956912,2157809220&fm=253&app=138&f=JPEG?w=815&h=800'
                  className='order-image'
                  mode='aspectFill'
                />
                {/* 右侧内容 */}
                <View className='order-info'>
                  <View className='order-service'>美容美发</View>
                  <View className='order-details'>
                    <Text className='order-amount-label'>消费金额：</Text>
                    <Text className='order-amount'>￥{item.amount}</Text>
                  </View>
                  <Text className='order-no'>订单：{item.orderNo}</Text>

                  <View className='order-date'>{item.payTime}</View>
                </View>
              </View>
            ))}

            {/* 没有更多数据的提示 */}
            <View className='no-more-data'>
              <Text className='no-more-text'>暂时没有更多了</Text>
            </View>
          </View>
        </ScrollView>
      </View>
    </View>
  )
}

export default Index
